/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,

} from 'react-native';
import Account from './Component/Account/account';
import Edit from './Component/Edit/edit';
import List from './Component/List/list';
import Picture from './Component/Picture/picture';
import HDTabBar from './HDTabBar';
import ScrollableTabView,{DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';
import Navigator from 'react-native-deprecated-custom-components/src/Navigator';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state={
            tabNames:['视频','录制','图片','我的'],
            tabIconNames:['ios-videocam-outline','ios-recording','ios-reverse-camera','ios-contact'],

        }

    }

    render() {
        let  tabNames = this.state.tabNames;
        let  tabIconNames = this.state.tabIconNames;
        return <ScrollableTabView
            renderTabBar={() => <HDTabBar
                tabNames={tabNames}
                tabIconNames={tabIconNames}
            />}
            tabBarPosition='bottom'
            locked={true}
            scrollWithoutAnimation={true}
        >


            <Navigator
               tabLabel="list"
               initialRoute={{component:List,name:'list',
                  params:{
                      title:'视频列表'
                  }
               }}
               renderScene={
                    (route, navigator) => <route.component {...route.params} navigator={navigator} />
               }
               configureScene={(route,routeStack)=>Navigator.SceneConfigs.PushFromRight}
            />

            <Navigator
                tabLabel="edit"
                initialRoute={{component:Edit,name:'edit',
                    params:{
                        title:'视频列表'
                    }
                }}
                renderScene={
                    (route, navigator) => <route.component {...route.params} navigator={navigator} />
                }
                configureScene={(route,routeStack)=>Navigator.SceneConfigs.FloatFromRight}
            />

            <Navigator
                tabLabel="picture"
                initialRoute={{component:Picture,name:'picture',
                    params:{
                        title:'视频列表'
                    }
                }}
                renderScene={
                    (route, navigator) => <route.component {...route.params} navigator={navigator} />
                }
                configureScene={(route,routeStack)=>Navigator.SceneConfigs.FloatFromRight}
            />

            <Navigator
                tabLabel="account"
                initialRoute={{component:Account,name:'account',
                    params:{
                        title:'视频列表'
                    }
                }}
                renderScene={
                    (route, navigator) => <route.component {...route.params} navigator={navigator} />
                }
                configureScene={(route,routeStack)=>Navigator.SceneConfigs.FloatFromRight}
            />

        </ScrollableTabView>;
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});